// -------------------------------------------------商品发布模块

// 变量声明表单整体的相关变量
const publishForm=document.querySelector('.publish-form');
// 实现商品图片预览功能的变量
const imageGroups=document.querySelectorAll('.images-preview-group');
const fileInputs=document.querySelectorAll('input[type="file"]');
const deleteBtn=document.querySelectorAll('.delete-Btn');

if(publishForm && imageGroups && fileInputs && deleteBtn){

    // 上传图片的文件添加监听添加下标
    fileInputs.forEach((input,index)=>{
        input.addEventListener('change',function (e){
            handleImgUpload(index,e);
        })
    })

// 删除图片的按键添加监听添加下标
    deleteBtn.forEach(button=>{
        button.addEventListener('click',function (){
            // 获取按钮上自定义的属性值
            const index=parseInt(this.getAttribute('data-index'))-1;
            deleteImg(index);
        })
    })

// 处理图片上传
    function handleImgUpload(index,event){
        const file=event.target.files[0];
        if(file  && file.type.startsWith('image/')){
            const imageGroup=imageGroups[index];
            const imagesPreview=imageGroup.querySelector('.images-preview');
            const input=imageGroup.querySelector('input[type="file"]');

            //     创建图片预览
            const img=document.createElement('img');
            img.classList.add('preview-img');

            //     读取照片
            const reader=new FileReader();
            reader.onload=function (e){
                // 清空
                imagesPreview.innerHTML='';
                img.src=e.target.result;
                imagesPreview.appendChild(img);

            }
            reader.readAsDataURL(file);
        }
    }

// 实现删除商品图片的功能
    function deleteImg(index){
        const imageGroup=imageGroups[index];
        const imagesPreview=imageGroup.querySelector('.images-preview');
        const input=imageGroup.querySelector('input[type="file"]');

//     清空图片
        imagesPreview.innerHTML='';

//     重新显示加号span图标
        const plusIcon=document.createElement('span');
        plusIcon.classList.add('plus-icon');
        plusIcon.textContent='+';
        imagesPreview.appendChild(plusIcon);

        input.value='';
    }

// 实现简单的表单验证功能
    publishForm.addEventListener('submit',function (e) {
//     阻止默认事件
        e.preventDefault();
        let isValid = true;

        //     重置所有的错误信息
        document.querySelectorAll('.error').forEach(mes => mes.textContent = '');

        //     验证商品名称，去除空格后字符范围0< <50
        const goodsName = document.getElementById('goodsName').value.trim();
        if (goodsName.length == 0) {
            document.getElementById('nameError').textContent = '请输入商品名称';
            isValid = false;
        }
        else if (goodsName.length > 50) {
            document.getElementById('nameError').textContent = '商品名称不得超过50字符';
            isValid = false;
        }

        //     验证商品描述,去除空格后字符范围0< <600
        const goodsDetail = document.getElementById('goodsDetail').value.trim();
        if (goodsDetail.length == 0) {
            document.getElementById('detailError').textContent = '请输入商品描述';
            isValid = false;
        }
        else if (goodsDetail.length > 600) {
            document.getElementById('detailError').textContent = '商品描述不得超过600字符';
            isValid = false;
        }

    //     若均没有问题，就弹出窗口，商品发布成功信息,将所填信息清空
        if(isValid==true) {
            this.submit();
                // 显示成功发布，重置信息
                publishForm.reset();
                window.scrollTo({ top: 0, behavior: 'smooth' });

                document.querySelector('input[name="is_bargain"][value="1"]').checked=true;

        }
    })
}


// ------------------------------------------------------------------------------------------------商品收藏界面
document.addEventListener('DOMContentLoaded', () => {
    const goodsCart=document.querySelector('.goods-cart');
    if(goodsCart) {
        const selectedNumEl = document.getElementById('selectedNum');
        const totalPriceEl = document.getElementById('totalPrice');
        const selectAll = document.getElementById('selectAllTop');
        const checkoutBtn = document.querySelector('.checkout-btn');//去结算按键


        // 获取共计几件商品，共计多少钱
        function updateSummary() {
            // 商品总价
            let total = 0;
            // 商品总数
            let count = 0;
            // 获取每一个item下的选择框
            const cbxs = document.querySelectorAll('.goods-cart-item .item-cbx');
            cbxs.forEach(cbx => {
                // 遍历所有勾选的cbx
                if (cbx.checked) {
                    // 找到该选框对应的goods-cart-item
                    let item = cbx.closest('.goods-cart-item');
                    let price = parseFloat(item.getAttribute('data-price')) || 0;
                    let quantityInput = item.querySelector('.input-quantity');
                    let quantity = Number(quantityInput.value) || 1;
                    // 计算商品总数和商品总价
                    total += price * quantity;
                    count += quantity;
                }
            });
            selectedNumEl.innerText = count;
            // 把商品总价的数字转换为小数点后两位的字符串
            totalPriceEl.innerText = `￥${total.toFixed(2)}`;

            // 全选框和下方的每个选框的操作
            // 页面上没有商品，购物车为空，禁用全选框
            if(cbxs.length === 0) {
                selectAll.checked = false;
                selectAll.indeterminate = false;
                selectAll.disabled = true;
            }
            else {
                // 保证全选框能用
                selectAll.disabled = false;
                // 统计当前被选中的商品数量
                let checkedNum = [...cbxs].filter(c => c.checked).length;
                // 所有商品均被选中
                if (checkedNum === cbxs.length) {
                    selectAll.checked = true;
                    selectAll.indeterminate = false;
                }
                // 没有商品被选中
                else if (checkedNum === 0) {
                    selectAll.checked = false;
                    selectAll.indeterminate = false;
                }
                // 选中部分商品
                else {
                    selectAll.checked = false;
                    // 半选状态，全选框显示一条横线
                    selectAll.indeterminate = true;
                }
            }
        }

        // 监听所有的选框，改变就会自动计算总价和数量和全选框的状态
        goodsCart.addEventListener('change', (e) => {
            if (e.target.classList.contains('item-cbx')) {
                updateSummary();
            }
        });

        // 全选框事件，总的全选框状态改变，保证下面的每个选框状态和其保持一致，重新计算
        selectAll.addEventListener('change', () => {
            const cbxs = goodsCart.querySelectorAll('.goods-cart-item .item-cbx');
            cbxs.forEach(cbx => cbx.checked = selectAll.checked);
            updateSummary();
        });

        //数量加减
        goodsCart.addEventListener('click', (e) => {
            const isQtyBtn = e.target.classList.contains('btn-quantity');
            if (isQtyBtn) {
                e.preventDefault();
                // 找到其对应的商品
                const item = e.target.closest('.goods-cart-item');
                const input = item.querySelector('.input-quantity');
                const val = Number(input.value);
                // 获取输入框的最大值
                const max = Number(input.max);

                // 更新输入框显示的数量
                if (e.target.classList.contains('btn-minus') && val > 1) {
                    input.value = val-1;
                }
                else if (e.target.classList.contains('btn-plus')) {
                    input.value = Math.min(val+1,max);
                }
                // 更新按键的状态
                updateButtonStatus(input);
                // 强制触发输入框的change事件
                input.dispatchEvent(new Event('change'));
                updateSummary();
            }
        });

        // 输入框事件
        goodsCart.addEventListener('change', (e) => {
            if (e.target.classList.contains('input-quantity')) {
                const input=e.target;
                const max = Number(input.max);

                // 数字向下取整或为1,不下于1
                let val = Math.max(1, Math.floor(Number(e.target.value) || 1));
                // 限制最大值
                val = Math.min(val,max);
                input.value = val;

                // 更新按键状态
                updateButtonStatus(input);
                updateSummary();
            }
        });

        // 更新按键状态
        function updateButtonStatus(input){
            const val = Number(input.value);
            const max = Number(input.max);

            // 更新减号按钮状态
            const minusBtn = input.previousElementSibling;
            minusBtn.disabled = val <= 1;

            // 更新加号按钮状态
            const plusBtn = input.nextElementSibling;//input的下一个兄弟元素，加号按键
            plusBtn.disabled = val >= max;
        }

        // 收集选中的商品ID和数量
        function collectSelectedItems() {
            const selectedItems = [];
            const cbxs = document.querySelectorAll('.goods-cart-item .item-cbx:checked');

            cbxs.forEach(cbx => {
                const item = cbx.closest('.goods-cart-item');
                const id = item.getAttribute('data-id');
                const quantityInput = item.querySelector('.input-quantity');
                const quantity = quantityInput.value;

                if (id) {
                    selectedItems.push({ id, quantity });
                }
            });
            return selectedItems;
        }

        // 提交去结算表单
        checkoutBtn.addEventListener('click', (e) => {
            e.preventDefault(); // 阻止默认行为
            e.stopPropagation(); // 阻止事件冒泡
            // 获取到选中的商品id和商品数量
            const selectedItems = collectSelectedItems();
            // 未选择商品显示提示
            if (selectedItems.length === 0) {
                e.preventDefault();
                alert('请至少选择一件商品');
                return false;
            }
            // 拼接URL
            const params = selectedItems.map(item => `id=${encodeURIComponent(item.id)}&quantity=${encodeURIComponent(item.quantity)}`).join('&');
            location.href = `order_list?${params}`;
        });

        // 取消收藏按钮点击事件
        goodsCart.addEventListener('click', (e) => {
            if (e.target.classList.contains('item-delete-btn')) {
                e.preventDefault();
                const item = e.target.closest('.goods-cart-item');
                const goodsId = item.getAttribute('data-id');
                
                // 发送AJAX请求删除收藏
                fetch('goods_delete?goodsid=' + goodsId, {
                    method: 'POST'
                })
                .then(response => response.text())
                .then(result => {
                    if (result === 'ok') {
                        // 删除成功，移除商品元素
                        item.remove();
                        // 更新总计
                        updateSummary();
                    }
                });
            }
        });

        // 初始化
        updateSummary();

        // 监听购物车容器内的子节点变化，动态更新商品数据
        let isUpdating = false;
        const observer = new MutationObserver(() => {
            if (!isUpdating) {
                isUpdating = true;
                setTimeout(() => {
                    updateSummary();
                    isUpdating = false;
                }, 200);
            }
        });
        observer.observe(goodsCart, { childList: true, subtree: false });
      }
});


// --------------------------------------------------------------------商品详情页
document.addEventListener('DOMContentLoaded', function() {
    // 点击切换图片,点小图大图切换
    const mainImg = document.getElementById('mainImage');
    const thumbnails = document.querySelectorAll('.thumbnail');

    // 为每个缩略图添加点击事件
    thumbnails.forEach(thumbnail => {
        thumbnail.addEventListener('click', function() {
            // 获取点击的缩略图对应的图片源
            const imgSrc = this.getAttribute('data-src');

            // 更换
            mainImg.src = imgSrc;

            // 更新缩略图的激活状态
            thumbnails.forEach(thumb => thumb.classList.remove('active'));
            this.classList.add('active');
        });
    });

    // 回到顶部功能
    const btn = document.getElementById('backToTop');

    // 监听滚动事件
    window.onscroll = function() {
        // scrollTop>300时显示按钮，否则隐藏
        if (document.documentElement.scrollTop > 300 || document.body.scrollTop > 300) {
            btn.style.display = 'block';
        }
        else {
            btn.style.display = 'none';
        }
    };

    // 点击按钮平滑回到顶部
    btn.onclick = function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    };
});
